<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>欢迎首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link id="link_" rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link class="link_" rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link class="link_" rel="stylesheet" href="../../css/custom.css" media="all">
    <link class="link_" rel="stylesheet" href="../../css/select2.css" media="all">
    <!-- <script>
        top.layui.each(top.layui.$('link'), function (index, item) {
            if (item.href.includes("layui.css") || item.href.includes("admin.css") || item.href.includes("custom.css")) {
                var oLi = document.createElement("link");
                oLi.rel = "stylesheet", oLi.href = decodeURIComponent(item.href), oLi.media = "all";
                var ul = document.getElementsByTagName("head")[0].appendChild(oLi)
            }
        })
    </script> -->
    <style>
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        #test1:after {
            content: '拖拽区';
            display: flex;
            width: 53%;
            height: 64px;
            position: absolute;
            left: 200px;
            top: 0;
            justify-content: center;
            align-items: center;
            color: #000;
            background-color: #f2f2f263;
            border: 1px dashed #fca2a2;
        }
    </style>
</head>

<body>
    <span class="layui-breadcrumb">
        <a href="#">首页</a>
        <a href="#">文件</a>
        <a><cite>获取文件信息</cite></a>
    </span>
    <!-- 常用的表单样式 -->
    <div class="layui-card tab_form_card layui-form forceForm-item ">
        <div class="layui-card-header">
            <h3 name="guid">获取文件信息</h3>
        </div>
        <div class="layui-card-body" pad15>
            <form class="layui-form" lay-filter="form-body">
                <div class="layui-form-item">
                    <div class="layui-row myrow_item">

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">文件名</label>
                                <div class="layui-input-inline" style="padding-bottom:8px;">
                                    <input type="checkbox" name="fileName" disabled lay-skin="switch"
                                        class="layui-input" lay-filter="test2" checked>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">文件大小</label>
                                <div class="layui-input-inline" style="padding-bottom:8px;">
                                    <input type="checkbox" name="fileSize" lay-skin="switch" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-sm6 layui-col-xs12 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">文件类型</label>
                                <div class="layui-input-inline" style="padding-bottom:8px;">
                                    <input type="checkbox" name="fileType" lay-skin="switch" class="layui-input">
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="test1" lay-submit
                            lay-filter="setmypass">选择文件</button>
                        <button type="button" class="layui-btn" id="upload" lay-submit
                            lay-filter="setmypass">上传</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="layui-card tab_form_card layui-form forceForm-item ">
        <div class="layui-card-body" pad15>
            <form class="layui-form" lay-filter="form-body">

                <div class="layui-form-item">
                    <div class="layui-row myrow_item">

                        <div class="layui-col-sm12 layui-col-xs12 layui-col-md12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">文件名</label>
                                <div class="layui-input-inline" style="padding-bottom:8px;    width: 100%;">
                                    <textarea name="fileInfo" id='fileInfo' placeholder="请输入内容"
                                        class="layui-textarea"></textarea>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </form>

        </div>
    </div>

    <script src="../../js/jquery.3.5.1.js"></script>
    <script src="../../js/select2.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/modules/layui_ext.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/'
        }).extend({
            index: 'lib/index', //主入口模块
        }).use(['jquery', 'form', 'laydate', 'element', 'upload'], function () {
            var $ = layui.jquery
            var form = layui.form
            var laydate = layui.laydate
            var upload = layui.upload

            window.filesArr = []

            // $('[name="fileName"]').on('change', function () {
            //     console.log(12)
            // });

            form.on('switch()', function (data) {
                // console.log(data.elem); //得到checkbox原始DOM对象
                // console.log(data.elem.checked); //是否被选中，true或者false
                // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                // console.log(data.othis); //得到美化后的DOM对象


                $('[name="fileInfo"]').val('').css("height", 'auto')
                fileInfo.style.height = fileInfo.scrollHeight + "px"
                window.filesArr = []
            });

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: 'http://cdn.layui.com/' //上传接口
                , multiple: true
                , accept: 'file'
                , auto: false
                , bindAction: '#upload'
                , number: 0
                , drag: true
                , done: function (res, index, upload) {
                }
                , error: function (index, upload) {
                }
                , choose: function (obj) {
                    //将每次选择的文件追加到文件队列
                    var files = obj.pushFile();

                    var isFileName = $('[name="fileName"]').prop('checked')
                    var isFileSize = $('[name="fileSize"]').prop('checked')
                    var isFileType = $('[name="fileType"]').prop('checked')

                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function (index, file, result) {
                        // console.log(index); //得到文件索引
                        // console.log(file); //得到文件对象

                        if (isFileName && !isFileSize && !isFileType) {
                            window.filesArr.push(file.name)
                        } else {
                            var fileObj = {};
                            if (isFileName) fileObj['name'] = file.name
                            if (isFileSize) fileObj['size'] = file.size
                            if (isFileType) fileObj['type'] = file.type
                            window.filesArr.push(fileObj)
                        }


                        $('[name="fileInfo"]').val(JSON.stringify({ size: window.filesArr.length, files: window.filesArr, }, null, 4)).css("height", 'auto')
                        fileInfo.style.height = fileInfo.scrollHeight + "px"

                        // console.log(result); //得到文件base64编码，比如图片

                        //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                        //这里还可以做一些 append 文件列表 DOM 的操作

                        //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                        // delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                    });
                }
                , before: function (obj) {
                }
            });

            init();  // 全局初始化
        })
    </script>
</body>

</html>